<template>
  <div>
    <div class="sale-personal-title">
      <div class="sale-personal-title-item div-align-justify-center"
           :class="tab === reportCycle.current ? 'sale-personal-title-item-active' : '' "
           @click="tab = reportCycle.current;key.reportCycle.current = new Date().getTime();"
      >当前周期
      </div>
      <div class="sale-personal-title-item div-align-justify-center"
           :class="tab === reportCycle.total ? 'sale-personal-title-item-active' : '' "
           @click="tab = reportCycle.total;key.reportCycle.total = new Date().getTime();"
      >全时段
      </div>
    </div>
    <template v-if="tab === reportCycle.current">
      <div class="sale-personal-content">
        <span class="paragraph-p2-heavy">{{ title.reportCycleCurrent }}</span>
        <span class="padding-left-4 div-align-justify-center paragraph-p3-heavy color-red">· 进行中</span>
      </div>
      <item-list :key="key.reportCycle.current"
                 :list-code="cycleListType"
                 :list-item-code="reportCycle.current"
                 v-on:reportCycleCurrentTitleEvent="reportCycleCurrentTitle"
      ></item-list>
    </template>
    <template v-if="tab === reportCycle.total">
      <div class="sale-personal-content">
        <span class="paragraph-p2-heavy">{{ title.reportCycleTotal }}</span>
      </div>
      <item-list :key="key.reportCycle.total"
                 :list-code="cycleListType"
                 :list-item-code="reportCycle.total"
                 v-on:reportCycleTotalTitleEvent="reportCycleTotalTitle"
      ></item-list>
    </template>

  </div>
</template>

<script>
import ItemList from '@/components/ItemList'

export default {
  name: "ReportSalePersonal",
  props: {},
  components: {
    ItemList,
  },
  data() {
    return {
      tab: this.GLOBAL.listItemType.report.cycle.current,
      reportCycle: this.GLOBAL.listItemType.report.cycle,
      cycleListType: this.GLOBAL.listType.cycle,
      title: {
        reportCycleCurrent: '',
        reportCycleTotal: '',
      },
      key: {
        reportCycle: {
          current: new Date().getTime(),
          total: new Date().getTime(),
        }
      },
    }
  },
  mounted() {
  },
  methods: {
    reportCycleCurrentTitle(value) {
      this.title.reportCycleCurrent = value
    },
    reportCycleTotalTitle(value) {
      this.title.reportCycleTotal = value
    },
  },
}
</script>

<style scoped>
.sale-personal-title {
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
}

.sale-personal-title-item {
  height: 22px;
  padding: 2px 8px;
  margin: 0 16px;
  background: #F5F5F5;
  color: #999999;
  border-radius: 8px;
}

.sale-personal-title-item-active {
  background: #FFF5CC;
  color: #242424;
}

.sale-personal-content {
  height: 22px;
  color: #424242;
  display: flex;
  flex-direction: row;
  margin-left: 16px;
}
</style>